<!DOCTYPE html>
<html>
    <head>
        <title>流量传递及流失页面</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--
          <link rel="stylesheet" href="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/themes/icon.css" type="text/css" />
        <link href="/css/css.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="/css/theme/font-awesome.min.css" type="text/css">		<link rel="stylesheet" href="/css/theme/bootstrap.min.css?22" type="text/css">	<link rel="stylesheet" href="/css/theme/bootstrap-select.css" type="text/css"><link rel="stylesheet" href="/css/theme/App.css?22" type="text/css"><link rel="stylesheet" href="/css/theme/report/stylesheets/report.css" type="text/css"><script src="/javascript/theme/libs/jquery-1.9.1.min.js"></script><script src="/javascript/theme/libs/bootstrap.min.js"></script><script type="text/javascript" src="/javascript/My97DatePicker/WdatePicker.js"></script><link href="http://bi.t.58.com/javascript/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css">

         -->

        <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
        <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
        <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
        <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">


        <link rel="stylesheet" href="$!{__beat.server.contextPath}/js/visit_path/visit_path.css" type="text/css"/>
        <script src="http://img.58cdn.com.cn/zt/bangbang/bangbangqiandao/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="$!{__beat.server.contextPath}/js/visit_path/d3.v3.js"></script>
        <script src="$!{__beat.server.contextPath}/js/visit_path/sankey.js"></script>
        <!-- <script src="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/jquery.min.js"></script>
        <script src="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/jquery.easyui.min.js"></script> -->

    </head>
    <body>
        <div class="container-fluid" >
          <!-- head选区 -->
          <div class="form-inline headControl" >
             
              <div class="row" style="margin-top:30px;">
                  <div class="form-group">
                      <label for="serviceLineF">业务线from：</label>
                      <select id="serviceLineF" name="serviceLineF" class="form-control input-sm">
                          #foreach($buss in $businessList)
                             #if($buss!='ershou')
                              <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                             #end
                          #end
                      </select>
                  </div>
                  <div class="form-group">
                      <label for="serviceLineT">业务线to：</label>
                      <select id="serviceLineT" name="serviceLineT" class="form-control input-sm">
                               #foreach($buss in $businessList)
			                        #if($buss!='ershou')
	                              <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
	                             #end
			                    #end
                      </select>
                  </div>
                  <div class="form-group">
                      <input type="hidden" id="cate_from_map" value="$cate_CN_Map">
                      <label for="plat">平台：</label>
                      <select id="plat" name="plat" class="form-control input-sm">
                              <option value="pc" >PC</option>     
                              <option value="m" >M</option> 
                              <option value="app" >APP</option> 
                      </select>
                  </div>                 
              </div>
              <div class="row">
                  <div class="form-group">
                      <input type="hidden" id="cate_from_map" value="$cate_CN_Map">
                      <label for="FirstClassF">一级类别from：</label>
                      <select id="FirstClassF" name="FirstClassF" class="form-control input-sm">
                                   <option value="all">全部</option>
                              #foreach($cate in $cate_CN_Map.get("$businessList[0]"))
			                        <option value="$cate" >$cate</option>
			                  #end
                      </select>
                  </div>
                  <div class="form-group">
                      <label for="FirstClassT">一级类别to：</label>
                      <select id="FirstClassT" name="FirstClassT" class="form-control input-sm">
                               <option value="all">全部</option>
                              #foreach($cate in $cate_CN_Map.get("$businessList[0]"))
			                        <option value="$cate" >$cate</option>
			                  #end
                      </select>
                  </div>
                  <div class="form-group">
                      <label class="date_label" for="stat_date">日期：</label>
                      <div class="form-group input-group input-group-sm" style="width: 100px;">
                          <input id="stat_date" name="stat_date" type="text"  class="form-control input-sm time" placeholder="选择时间" data-date-end-date='-1d' value="$!stat_date"/>
                         
                      </div>
                  </div>
                 
              </div>
              
              <div class="row">
                  <div class="form-group" style="margin-top:-19px;">
                      <label for="pageTypeF">页面类型from：</label>
					  <button name="page_from" onclick="showSelect(this)" class="btn btn-default dropdown-toggle" type="button"   aria-haspopup="true" aria-expanded="false" style="width: 100px; height: 30px;cursor: pointer; ">
							  <input id="page_type_from" style="width:100px;margin-left: -12px;text-align: left;margin-top: -9px;height:30px" type="text" value="全部" class="btn btn-default dropdown-toggle" disabled>
							  <span  class="caret" style="position: relative;margin-left: -20px;cursor: pointer;margin-top: -8px;"></span>
					  </button>

					  <div  style="position: absolute;width: 160px;height:50px; border: 1px solid rgba(0,0,0,.15);border-radius: 4px;z-index: 999;background-color: white;display:none;border-bottom-color:white;margin-left:110px;">
		                                <button name="select-all" type="button" class="btn btn-warning btn-xs" style="float:left;margin-left: 15px;margin-bottom: 5px;margin-top:11px;" onclick="bsallselect(this)">全选</button><button type="button" class="btn btn-warning btn-xs" style="float:right;margin-right: 20px;margin-bottom: 5px;margin-top:11px;" onclick="clearallselect(this)" name="clear-all">清空</button>
			                            <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 239px; overflow-y: auto; min-height: 92px;display: block;position: absolute;border-top-color:white;margin-top:-2px;margin-left:-1px;">

					                        #foreach($page_type in $page_type_from)
					                        <li rel="$velocityCount" class="" style="cursor: pointer;"><a tabindex="0" class="" style=""><span class="text">$page_type</span><i class="glyphicon  icon-ok check-mark" style="float:right;"></i></a></li>
					                        #end

					                    </ul>

		                </div>
                  </div>
                  <div class="form-group" style="margin-top:-19px;">
                      <label for="pageTypeT">页面类型to：</label>
                      <button name="page_to" onclick="showSelect(this)" class="btn btn-default dropdown-toggle" type="button"   aria-haspopup="true" aria-expanded="false" style="width: 100px; height: 30px;cursor: pointer; ">
							  <input id="page_type_to" style="width:100px;margin-left: -12px;text-align: left;margin-top: -9px;height:30px" type="text" value="全部" class="btn btn-default dropdown-toggle" disabled>
							  <span  class="caret" style="position: relative;margin-left: -20px;cursor: pointer;margin-top: -8px;"></span>
					  </button>

					  <div  style="position: absolute;width: 160px;height:50px; border: 1px solid rgba(0,0,0,.15);border-radius: 4px;z-index: 999;background-color: white;display:none;border-bottom-color:white;margin-left:110px;">
		                                <button name="select-all" type="button" class="btn btn-warning btn-xs" style="float:left;margin-left: 15px;margin-bottom: 5px;margin-top:11px;" onclick="bsallselect(this)">全选</button><button type="button" class="btn btn-warning btn-xs" style="float:right;margin-right: 20px;margin-bottom: 5px;margin-top:11px;" onclick="clearallselect(this)" name="clear-all">清空</button>
			                            <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 239px; overflow-y: auto; min-height: 92px;display: block;position: absolute;border-top-color:white;margin-top:-2px;margin-left:-1px;">

					                        #foreach($page_type in $page_type_to)
					                        <li rel="$velocityCount" class="" style="cursor: pointer;"><a tabindex="0" class="" style=""><span class="text">$page_type</span><i class="glyphicon  icon-ok check-mark" style="float:right;"></i></a></li>
					                        #end

					                    </ul>

		                </div>

                  </div>
                
                  <div class="form-group sea_btn">
                      <select id="platform" name="platform" class="form-control input-sm" style="margin-left:80px;">
                          <option value="pv">PV</option>
                          <option value="uv">UV</option>
                      </select>
                      <input type="button" id="searchBtn" value="查询" class="btn btn-primary btn-xs" style="margin-top:-50px;margin-left:210px;">
                  </div>
              </div>
          </div>
          <!-- 图表 -->
          <div id="chartMain">
            <p id="chart"></p>
            <div class="explainMain ubs_ex">
              <dl>
                  <dt>
                      <i class="mark"></i><span>流量传递及流失图说明</span>
                  </dt>
                  <dd>1. 本层路径页面类型，包括：</dd>
                  <dd>
                      <span class="home">home:首页</span>
                      <span class="list">list:列表页</span>
                      <span class="index">index:大类页</span>
                      <span class="detail">detail:详情页</span>
                      <span class="qy_detail">qy_detail:企业详情页</span>
                      <span class="post">post:发布页</span>
                      <span class="end">end:离开</span>
                      <span class="vip">vip:vip中心</span>
                      <span class="jianli_detail">jianli_detail:简历详情页</span>
                      <span class="my">my:我的个人中心</span>
                      <span class="empty">empty:空页面类型</span>
                      <span class="others">others:其他业务类型页面</span>
                      <span class="other_biz">other_biz:其他业务线</span>
                      <span class="login">login:登录页</span>
                      <span class="deliver">deliver:投递页</span>
                      <span class="jump_page">jump_page:跳出页标识</span>
                      <span class="land_page">land_page:落地页标识</span>
                      <span class="quit_page">quit_page:退出页标识</span>
                  </dd>
                  <dd>2. 左列为land_page时，右列为各落地页页面类型。</dd>
                  <dd>3. 右列为quit_page时，左列为各退出页页面类型。</dd>
                  <dd>4. 右列为jump_page时，左列为各跳出页页面类型。</dd>
              </dl>
            </div>
          </div>
        </div>


<script src="$!{__beat.server.contextPath}/js/visit_path/trafficFlow.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript">


  var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
  var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
    orientation: "top left"
    };
    $('#stat_date').datepicker(datepicker_op);
     
    
    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

     function showSelect(obj){
      var event = window.event||e;
        event.cancelBubble = true;

    var isShow = $(obj).next().get(0).style.display;
    if(isShow == 'none'){
      $(".dropdown-menu").parent().hide();
      $(obj).next().show();
    }else{
      $(obj).next().hide();
    }
  }


     $('body').click(function(e){
     	
         if(typeof(e.target.name)=='undefined'||e.target.name!='page_from'||e.target.name!='page_to'||e.target.name!='select-all'||e.target.name!='clear-all'||e.target.name=='stat_date'){
 	        if(e.target.name=='stat_date'){
 	              return;
 	            }
 	        for(var i=0;i<e.originalEvent.path.length;i++){	        
 	        	if($(e.originalEvent.path[i]).hasClass("table-condensed")){
 	        		 return;
 	        	}
 	        }
 	        
 	        $(".dropdown-menu").parent().hide();
         }
     });



    $("li").click(function(e){
      var event = window.event||e;
        event.cancelBubble = true;
       var input = $(this).parent().parent().prev().children().eq(0).get(0);
       var value = input.value;
       var text = $(this).text();
       var $i = $(this).children().eq(0).children().eq(1);
       var newValue = '';
       if($i.hasClass("glyphicon-ok")){
         $i.removeClass("glyphicon-ok");
         var valueArr = value.split(",");
         if(valueArr.length==1){
           input.value = '全部';
         }else{
           for(var i=0;i<valueArr.length;i++){
             if(text!=valueArr[i]){
               newValue += valueArr[i]+",";
             }
           }
           newValue = newValue.slice(0,newValue.length-1);
           input.value = newValue;
         }

       }else{
         $i.addClass("glyphicon-ok");
         if(value=='全部'){
           input.value = text;
         }else{
           input.value += ','+text;
         }
       }
    });

    function bsallselect(obj){
      var event = window.event||e;
      event.cancelBubble = true;
      var text = '';
      var $lis = $(obj).next().next().children();
      $($lis).each(function(index,element){
        $(this).children().eq(0).children().eq(1).addClass("glyphicon-ok");
        text += $(element).text()+',';
      });
      $(obj).parent().prev().children().eq(0).get(0).value = text.slice(0,text.length-1);
    
    }

    function clearallselect(obj){
      var event = window.event||e;
        event.cancelBubble = true;
      var $lis = $(obj).next().children();
      $($lis).each(function(index,element){
        $(this).children().eq(0).children().eq(1).removeClass("glyphicon-ok");
      });
      $(obj).parent().prev().children().eq(0).get(0).value = '全部';
    }

</script>
    </body>
</html>